<template lang="pug">
  .page
    .search-form.mb-10.pl-10.pr-10
      Row(type="flex" justify="start")
        Col.pr-20.mb-15(span="7")
          span.label-txt.w80 所属客服：
          Select(v-model="serverID" placeholder="请选择所属客服" filterable clearable)
            Option(v-for="(item, index) in serverId_arr" :value="item.key" :key="index") {{ item.value }}
        Col.pr-20.mb-15(span="7")
          span.label-txt.w110 客户名称：
          Input(v-model="companyName" placeholder="请输入" clearable)
        Col.pr-20.mb-15(span="10")
          span.label-txt.w80 文件名称：
          Input(v-model="fileName" placeholder="请输入" clearable)
          Button.ml-10(type="info" @click="searchBtn") 查询
    .pl-20.pr-20.bg-white
      Table.hasTitle-table.beautiful-table(width="100%" :loading="loading" stripe :columns="thead" :data="listData" @on-selection-change="tableSelectChange")
        .pr-24.pl-24(slot="header")
          .pull-right.table-title-btns
            Button.mr-15(type="info" @click="downloadCusFiles") 批量下载
        template(slot-scope="{ row, index }" slot="action")
          Button.mr-5(type="text" size="small" @click="downloadAttaFile(row.attaID,row.fileName)") 下载
        .clearfix.pl-20.pr-20(slot="footer")
          Page(:total="codeTotal" :current="PageIndex" :page-size="PageSize" prev-text="上一页" next-text="下一页" @on-change="pageChangeFn" show-total @on-page-size-change="onpageSizeChange" show-sizer :page-size-opts="[10, 20, 30, 50, 100]")

      //- div(style="margin: 10px;overflow: hidden")
      //-   div(style="float: right;")
      //-     Page(:total="codeTotal" :current="PageIndex" :page-size="PageSize" prev-text="上一页" next-text="下一页" @on-change="pageChangeFn" show-total @on-page-size-change="onpageSizeChange" show-sizer :page-size-opts="[10, 20, 30, 50, 100]")
</template>

<script>
import filesManageApi from '@/api/filesManage.api.js'
import dataApi from '@/api/data.js'
import config from '@/config'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro

export default {
  name: 'contract-files',
  components: {
  },
  data () {
    return {
      uploadBaseUrl: baseUrl,
      thead: [
        {
          type: 'selection',
          width: 60,
          fixed: 'left',
          align: 'center'
        },
        {
          title: '客户名称',
          minWidth: 100,
          key: 'name'
        },
        {
          title: '所属客服',
          minWidth: 100,
          key: 'serverName'
        },
        {
          title: '文件名称',
          minWidth: 100,
          key: 'fileName'
        },
        {
          title: '操作',
          minWidth: 100,
          slot: 'action'
        }
      ],
      serverId_arr: [],
      listData: [],
      serverID: '', // 身份证号码
      companyName: '', // 公司名称
      fileName: '', // 文件名
      idArr: [],
      loading: false,
      PageIndex: 1,
      PageSize: 10,
      codeTotal: 0
    }
  },
  // mixins: [Mixin, theadMixin],
  computed: {
  },
  created () {
    this.getList()
    this.serverDown()
  },
  watch: {
    $route (to, from) {
      if (to.name === 'contract-files') {
        this.getList()
      }
    }
  },
  methods: {
    /**
     * server所属客服下拉数据
     */
    serverDown () {
      let data = {
        pageIndex: 1,
        pageSize: 1000
      }
      dataApi.postServers(data).then(res => {
        this.serverId_arr = res.data[0].items
      })
    },
    // 获取客户列表
    getList () {
      this.loading = true
      filesManageApi.GetCustomerFiles({
        serverID: this.serverID, // 身份证号码
        companyName: this.companyName, // 公司名称
        fileName: this.fileName, // 文件名
        PageIndex: this.PageIndex,
        PageSize: this.PageSize
      }).then(res => {
        this.loading = false
        if (res.data.success) {
          this.listData = res.data.data
          this.codeTotal = res.data.totalRows
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },

    // 下载
    downloadAttaFile (id, name) {
      filesManageApi.DownloadAttaFile({
        attaid: id
      }).then(res => {
        let fileName = name
        let blob = new Blob([res.data], { type: 'application/octet-stream' })
        if ('download' in document.createElement('a')) {
          let objectUrl = URL.createObjectURL(blob)
          const link = document.createElement('a')
          link.download = fileName
          link.href = objectUrl
          link.click()
        } else {
          navigator.msSaveBlob(blob, fileName)
        }
      })
    },
    // 批量下载
    downloadCusFiles () {
      filesManageApi.DownloadCusFiles({
        Params: this.idArr
      }).then(res => {
        if (res.data.success) {
          let objectUrl = res.data.data
          const link = document.createElement('a')
          link.download = ''
          link.href = objectUrl
          link.click()
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    // 查询
    searchBtn () {
      this.PageIndex = 1
      this.getList()
    },
    switchChange (val) {
      if (val) {
        this.formValidate.enable = 1
      } else {
        this.formValidate.enable = 0
      }
    },
    tableSelectChange (val) {
      this.idArr = val.map(item => {
        return item.attaID
      })
    },
    pageChangeFn (val) {
      this.PageIndex = val
      this.getList()
    },
    onpageSizeChange (val) {
      this.PageSize = val
      this.getList()
    }
  }
}
</script>

<style>

</style>
